﻿<template>
    <div class="page-main UsingWireropeAttr">
        <DataTable ref="UsingWireropeAttrDataTableRef" :data="list" :hasAdd="Gx.HasPermission(40502) && !isSelect" :page-index="pageInfo.pageIndex" :page-size="pageInfo.pageSize" :total-count="pageInfo.totalCount" @page-change="onPageChange" @search-filter="onSearchFilter" @clear-filter="onClearFilter" @show-detail="onShowDetail" v-bind="$attrs">
            <vxe-column title="在用绳编码" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.usingWirerope_Code || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="在用绳名称" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.usingWirerope_Name || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="在用绳矿山" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.usingWirerope_DepartmentName || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="附件编码" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.code || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="附件名称" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.attrFileName || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="备注" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.remark || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="创建人姓名" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.createUserName || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="创建时间" min-width="120">
                <template #default="{ row }">
                    {{ Gx.YMD(row.createDate) }}
                </template>
            </vxe-column>

            <vxe-column title="操作" width="100" v-if="!isSelect">
                <template #default="{ row }">
                    <el-button type="primary" @click="onDownload(row)" v-if="Gx.HasPermission(40504)">下载</el-button>
                </template>
            </vxe-column>

            <!-- 在添加按钮后面的搜索条件 -->
            <template #otherFilter>
                <el-input class="placeholder-center" v-model="filterModel._AttrFileName" placeholder="附件名称" clearable></el-input>
                <el-input class="placeholder-center" v-model="filterModel._UsingWireropeName" placeholder="钢丝绳名称" clearable></el-input>
                <DataSelect table="Department" placeholder="请选择矿山" :filter="{ _Type: Enums.Department_Type.矿山 }" v-model:id="filterModel._UsingWireropeDepartmentIDs" multiple collapse-tags></DataSelect>
            </template>

            <!-- 在搜索按钮后面的按钮 -->
            <template #otherBtn></template>

            <!-- 顶部右侧按钮 -->
            <template #rightBtn v-if="!isSelect">
                <el-button-group>
                    <el-button v-if="Gx.HasPermission(40503)" type="danger" @click="onDelete">删除</el-button>
                </el-button-group>
            </template>

            <!-- 高级搜索内容 -->
            <template #Advfilter>
                <el-form v-model="filterModel" label-position="top" @submit.prevent>
                    <el-form-item label="日期范围">
                        <el-date-picker style="width: 300px !important" v-model="BillDate" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" clearable value-format="YYYY-MM-DD" format="YYYY-MM-DD"> </el-date-picker>
                    </el-form-item>
                </el-form>
            </template>
        </DataTable>

        <!-- 在用绳附件详情 -->
        <UsingWireropeAttrDetail ref="UsingWireropeAttrDetailRef" v-if="isShowDetail" @close="onCloseDetail"></UsingWireropeAttrDetail>
    </div>
</template>

<script lang="ts" setup>
import Enums from "@/gx/Enums";
import Gx from "@/gx/Gx";
import { TipsType } from "@/_gx/TsEnums";
import UsingWireropeAttrDetail from "./UsingWireropeAttrDetail.vue";

/********************************************** 接收参数 **********************************************/

const props = defineProps({
    //是否为选择组件，在此组件用做弹框选择的子组件时传true
    isSelect: {
        type: Boolean,
        default: false,
    },

    //默认搜索条件，如果是多选的话可以增加已选数据的过滤
    defaultFilter: {
        type: Object,
        default: {},
    },
});

/********************************************** 列表相关定义 **********************************************/

//表格的数据
const list = ref([]);
const BillDate = ref<any>();

//分页信息
const pageInfo = reactive({
    pageIndex: 1,
    pageSize: 20,
    totalCount: 0,
    orderBy: "[x].[UsingWireropeAttrID] DESC",
});

//搜索条件
const filterModel = ref<any>({});

//搜索条件空对象的json字符串，用于清空搜索条件时使用
const filterModelJson = Gx.SerializeObject(filterModel.value);

//DataTable对象，使用此对象来调用DataTable组件中抛出的属性或方法
const UsingWireropeAttrDataTableRef = ref(null);

/********************************************** 列表方法与事件 **********************************************/

//页面加载
onMounted(() => {
    Init();
});

//初始化
const Init = () => {
    GetPage();
};

//分页方法
const GetPage = () => {
    let _data = {};

    MergeObjs(_data, filterModel.value, props.defaultFilter);

    App.CallApi(Api.UsingWireropeAttr.GetPage(pageInfo.pageIndex, pageInfo.pageSize, pageInfo.orderBy), {
        data: _data,
        success: (res: any) => {
            list.value = res.items;
            pageInfo.totalCount = res.totalCount;

            //在这里抛出一个事件，用来处理当此组件用于选择弹框时数据回显的选中功能
            emits("setSelectData");
        },
    });
};

//分页改变
const onPageChange = (data: any) => {
    pageInfo.pageIndex = data.currentPage;
    pageInfo.pageSize = data.pageSize;
    GetPage();
};

//高级搜索点击搜索按钮
const onSearchFilter = () => {
    pageInfo.pageIndex = 1;

    if (!Gx.IsEmpty(BillDate.value) && BillDate.value.length > 0) {
        filterModel.value._CreateDate_Begin = BillDate.value[0];
        filterModel.value._EndDate_End = BillDate.value[1];
    } else {
        filterModel.value._CreateDate_Begin = null;
        filterModel.value._EndDate_End = null;
    }

    GetPage();
};

//高级搜索点击清空按钮
const onClearFilter = () => {
    BillDate.value = [];
    filterModel.value = Gx.DeserializeObject(filterModelJson);
    pageInfo.pageIndex = 1;
    GetPage();
};

/********************************************** 列表按钮功能 **********************************************/

//删除
const onDelete = () => {
    let _ids: [] = UsingWireropeAttrDataTableRef.value.GetSelectProp();
    if (Gx.IsEmpty(_ids) || _ids.length == 0) {
        App.Tips({ msg: "请在下方的表格中选择相应的数据！" });
        return;
    }

    App.Confirm({
        msg: "确定要删除选择的数据？",
        type: TipsType.Warning,
        onOk: () => {
            App.CallApi(Api.UsingWireropeAttr.BatchDelete, {
                data: _ids,
                success: (res: any) => {
                    App.Tips({ type: TipsType.Success, msg: "操作成功！" });
                    GetPage();
                },
            });
        },
    });
};

/********************************************** 详情页相关 **********************************************/

//是否显示详情对话框
const isShowDetail = ref(false);
//详情对话框Ref对象
const UsingWireropeAttrDetailRef = ref(null);
//向子组件传值
const usingWireropeAttrID = ref<number | null>(null);
provide("usingWireropeAttrID", usingWireropeAttrID);

//显示详情
const onShowDetail = (row) => {
    isShowDetail.value = true;
    usingWireropeAttrID.value = row?.autoID;
    nextTick(() => {
        UsingWireropeAttrDetailRef.value.Init();
    });
};

//关闭详情
const onCloseDetail = (isRefresh: boolean) => {
    if (isRefresh) {
        GetPage();
    }

    isShowDetail.value = false;
};

//下载
const onDownload = (row) => {
    Gx.DownloadFile(row.attrFileUrl, row.attrFileName);
};

//向上抛出的事件与方法
const emits = defineEmits(["setSelectData"]);
defineExpose({ UsingWireropeAttrDataTableRef });
</script>
